(function( $ ){
    // 当domReady的时候开始初始化
    $(function() {
    	
    	$(".uploader-container ").each(function(index){
    		var $wrap = $(this).find('#uploader'),
    		
    		// 图片容器
    		$queue = $( '<ul class="filelist"></ul>' )
    		.appendTo( $wrap.find( '.queueList' ) ),
    		
    		$dndArea = $wrap.find("#dndArea"),
    		
    		// 状态栏，包括进度和控制按钮
    		$statusBar = $wrap.find( '.statusBar' ),
    		
    		// 文件总体选择信息。
    		$info = $statusBar.find( '.info' ),
    		
    		// 上传按钮
    		$upload = $wrap.find( '.uploadBtn' ),
    		
    		// 没选择文件之前的内容。
    		$placeHolder = $wrap.find( '.placeholder' ),
    		
    		$progress = $statusBar.find( '.progress' ).hide(),
    		
    		$filePicker = $wrap.find('#filePicker'),
    		
    		// 添加的文件数量
    		fileCount = 0,
    		
    		// 添加的文件总大小
    		fileSize = 0,
    		
    		// 优化retina, 在retina下这个值是2
    		ratio = window.devicePixelRatio || 1,
    		
    		// 缩略图大小
    		thumbnailWidth = 110 * ratio,
    		thumbnailHeight = 110 * ratio,
    		
    		// 可能有pedding, ready, uploading, confirm, done.
    		state = 'pedding',
    		
    		// 所有文件的进度信息，key为file id
    		percentages = {},
    		// 判断浏览器是否支持图片的base64
    		isSupportBase64 = ( function() {
    			var data = new Image();
    			var support = true;
    			data.onload = data.onerror = function() {
    				if( this.width != 1 || this.height != 1 ) {
    					support = false;
    				}
    			}
    			data.src = "";
    			return support;
    		} )(),
    		
    		// 检测是否已经安装flash，检测flash的版本
    		flashVersion = ( function() {
    			var version;
    			
    			try {
    				version = navigator.plugins[ 'Shockwave Flash' ];
    				version = version.description;
    			} catch ( ex ) {
    				try {
    					version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
    					.GetVariable('$version');
    				} catch ( ex2 ) {
    					version = '0.0';
    				}
    			}
    			version = version.match( /\d+/g );
    			return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
    		} )(),
    		
    		supportTransition = (function(){
    			var s = document.createElement('p').style,
    			r = 'transition' in s ||
    			'WebkitTransition' in s ||
    			'MozTransition' in s ||
    			'msTransition' in s ||
    			'OTransition' in s;
    			s = null;
    			return r;
    		})(),
    		
    		del_btn = $wrap.find( 'input[for-format=empty-uploader]' ),
    		
    		$initBtn = $wrap.find( 'input[for-format=reload-uploader]' ),
    		
    		// WebUploader实例
    		uploader;
    		if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {
    			
    			// flash 安装了但是版本过低。
    			if (flashVersion) {
    				(function(container) {
    					window['expressinstallcallback'] = function( state ) {
    						switch(state) {
    						case 'Download.Cancelled':
    							alert('您取消了更新！')
    							break;
    							
    						case 'Download.Failed':
    							alert('安装失败')
    							break;
    							
    						default:
    							alert('安装已成功，请刷新！');
    						break;
    						}
    						delete window['expressinstallcallback'];
    					};
    					
    					var swf = './expressInstall.swf';
    					// insert flash object
    					var html = '<object type="application/' +
    					'x-shockwave-flash" data="' +  swf + '" ';
    					
    					if (WebUploader.browser.ie) {
    						html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
    					}
    					
    					html += 'width="100%" height="100%" style="outline:0">'  +
    					'<param name="movie" value="' + swf + '" />' +
    					'<param name="wmode" value="transparent" />' +
    					'<param name="allowscriptaccess" value="always" />' +
    					'</object>';
    					
    					container.html(html);
    					
    				})($wrap);
    				
    				// 压根就没有安转。
    			} else {
    				$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
    			}
    			
    			return;
    		} else if (!WebUploader.Uploader.support()) {
    			alert( 'Web Uploader 不支持您的浏览器！');
    			return;
    		}
    		var i = 1;
    		if(index == 1)i = 50;
    		// 实例化
    		uploader = WebUploader.create({
    			pick: {
    				id: $filePicker,
    				label: '点击添加'
    			},
    			auto :true,
    			formData: {
    				portrait: index
    			},
    			dnd: $queue,
    			paste: $wrap,
    			swf: 'static/plugins/webuploader/dist/Uploader.swf',
    			chunked: false,
    			chunkSize: 512 * 1024,
    			server: 'uploadFile',
    			// runtimeOrder: 'flash',
    			
    			accept: {
    				title: 'Images',
    				extensions: 'gif,jpg,jpeg,bmp,png',
    				mimeTypes: 'image/*'
    			},
    			
    			// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
    			disableGlobalDnd: true,
    			fileNumLimit: i,
    			fileSizeLimit: 200 * 1024 * 1024,    // 200 M
    			fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
    		});
    		
    		// 拖拽时不接受 js, txt 文件。
    		uploader.on( 'dndAccept', function( items ) {
    			var denied = false,
    			len = items.length,
    			i = 0,
    			// 修改js类型
    			unAllowed = 'text/plain;application/javascript ';
    			
    			for ( ; i < len; i++ ) {
    				// 如果在列表里面
    				if ( ~unAllowed.indexOf( items[ i ].type ) ) {
    					denied = true;
    					break;
    				}
    			}
    			
    			return !denied;
    		});
    		
    		// uploader.on('filesQueued', function() {
    		//     uploader.sort(function( a, b ) {
    		//         if ( a.name < b.name )
    		//           return -1;
    		//         if ( a.name > b.name )
    		//           return 1;
    		//         return 0;
    		//     });
    		// });
    		
    		// 添加“添加文件”的按钮，
			uploader.addButton({
				id: '#filePicker2',
				label: '继续添加'
			});
    		
    		uploader.on('ready', function() {
    			window.uploader = uploader;
    		});
    		//建立外部网页媒介，使得其他js文件能够访问内部方法
    		//重加载ImgList，图片回显
    		$initBtn.on( 'click', function() {
    			var ii = $initBtn.attr("v");
    			var upId = $initBtn.attr("id");
    			var upUrl = $initBtn.attr("url");
    			$.ajax({
    				url:upUrl,
    				type:"GET",
    				data:{
    					id:upId
    				},
    				success:function(data){
    					initEditList();
    					data = eval("("+data+")");
    					if(data.res == 1){
    						var vals = data.obj;
    						if(vals != null && vals.length > 0){
    							for(var j = 0; j < vals.length; j++){
    								var path = vals[j].filePath;
    								var imgUrl = path;
    								var imgName = vals[j].fileName;
    								var fileId = vals[j].fileId;
    								var relId = vals[j].fileRelId;
    								var size = vals[j].fileSize;
    								var remark = vals[j].fileRemark;
    								var k = -1;
    								if(ii == 0 && remark == "portrait") k = 0;
    								if(ii == 1 && remark == "normal") k = 1;
    								getImgToBase64(imgUrl, function(data){
    									$($(".uploader-container")[k]).find("#dndArea").addClass("element-invisible");
    									$($(".uploader-container")[k]).find(".statusBar").removeClass("element-invisible");
    									$($(".uploader-container")[k]).find(".filelist").css("display","block");
    									var $li = $( '<li fileId="' + fileId + '" relId="' + relId + '" size="'+size+'">' +
    											'<p class="title">' + imgName + '</p>' +
    											'<p class="imgWrap"><img src="'+data+'"></p>' +
    									'</li>' ),
    									
    									$btns = $('<div class="file-panel">' +
    									'<span class="cancel">删除</span></div>').appendTo( $li );
    									
    									$li.on( 'mouseenter', function() {
    										$btns.stop().animate({height: 30});
    									});
    									
    									$li.on( 'mouseleave', function() {
    										$btns.stop().animate({height: 0});
    									});
    									
    									$btns.on( 'click', 'span', function() {
    										var relId = $(this).parent().parent().attr("relId");
    										var size = $(this).parent().parent().attr("size");
    										$.ajax({
    											url:"user/del/pic",
    											data:{
    												id:relId
    											},
    											success:function(data){
    												$queue.find($li).remove();
    												fileCount --;
    												fileSize -= size;
    												if(fileCount == 0){
    													$($(".uploader-container")[k]).find("#dndArea").removeClass("element-invisible");
    													$($(".uploader-container")[k]).find(".statusBar").addClass("element-invisible");
    													$($(".uploader-container")[k]).find(".filelist").css("display","none");
    												}
    											},
    											error:function(err){
    												alert("删除失败");
    												console.log(err);
    											}
    										});
    									});
    									
    									$li.appendTo( $($(".uploader-container")[k]).find(".filelist") );
    									fileCount ++;
    									fileSize += size;
    									
    									var t = '共' + fileCount + '张（' +
    									WebUploader.formatSize( fileSize )  +
    									'），已上传' + 0 + '张';
    									
    									$info.text(t);
    								})
    							}
    						}
    					}
    				},
    				error:function(err){
    					console.log(err);
    				}
    			});
    		} );
    		function initEditList(){
    			$queue.find("li").remove();
				fileCount = 0;
				fileSize = 0;
				$dndArea.removeClass("element-invisible");
				$statusBar.addClass("element-invisible");
				$queue.css("display","none");
    		}
    		function getBase64Image(img) {
    		    var canvas = document.createElement("canvas");
    		    canvas.width = img.width;
    		    canvas.height = img.height;
    		    var ctx = canvas.getContext("2d");
    		    ctx.drawImage(img, 0, 0, img.width, img.height);
    		    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    		    return canvas.toDataURL("image/"+ext);
    		}
    		
    		function getImgToBase64(url,callback){//将图片转换为Base64
    			var canvas = document.createElement('canvas'),
    			ctx = canvas.getContext('2d'),
    			img = new Image;
    			img.crossOrigin = 'Anonymous';
    			img.src = url;
    			img.onload = function(){
    				canvas.height = img.height;
    				canvas.width = img.width;
    				ctx.drawImage(img,0,0);
    				var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    				var dataURL = canvas.toDataURL("image/"+ext);
    				callback(dataURL);
    				canvas = null;
    			};
			}
    		function dataURLtoFile(dataurl, filename) {//将base64转换为文件
    		    var arr = dataurl.split(','),
    		    	mime = arr[0].match(/:(.*?);/)[1],
    		    	bstr = atob(arr[1]),
    		    	n = bstr.length,
    		    	u8arr = new Uint8Array(n);
    		    while(n--){
    		        u8arr[n] = bstr.charCodeAt(n);
    		    }
    		    return new File([u8arr], filename, {type:mime});
    		}

    		// 当有文件添加进来时执行，负责view的创建
    		function addFile( file ) {
    			var $li = $( '<li id="' + file.id + '">' +
    					'<p class="title">' + file.name + '</p>' +
    					'<p class="imgWrap"></p><div class="input-container"></div>'+
    			'</li>' ),
    			
    			$btns = $('<div class="file-panel">' +
    					'<span class="cancel">删除</span>' +
    					'<span class="rotateRight">向右旋转</span>' +
    			'<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
    			$wrap = $li.find( 'p.imgWrap' ),
    			
    			showError = function( code ) {
    				switch( code ) {
    				case 'exceed_size':
    					text = '文件大小超出';
    					break;
    					
    				case 'interrupt':
    					text = '上传暂停';
    					break;
    					
    				default:
    					text = '上传失败，请重试';
    				break;
    				}
    				
    				$info.text( text ).appendTo( $li );
    			};
    			
    			if ( file.getStatus() === 'invalid' ) {
    				showError( file.statusText );
    			} else {
    				// @todo lazyload
    				$wrap.text( '预览中' );
    				uploader.makeThumb( file, function( error, src ) {
    					var img;
    					
    					if ( error ) {
    						$wrap.text( '不能预览' );
    						return;
    					}
    					
    					if( isSupportBase64 ) {
    						img = $('<img src="'+src+'">');
    						$wrap.empty().append( img );
    					} else {
    						$.ajax('../../server/preview.php', {
    							method: 'POST',
    							data: src,
    							dataType:'json'
    						}).done(function( response ) {
    							if (response.result) {
    								img = $('<img src="'+response.result+'">');
    								$wrap.empty().append( img );
    							} else {
    								$wrap.text("预览出错");
    							}
    						});
    					}
    				}, thumbnailWidth, thumbnailHeight );
    				
    				percentages[ file.id ] = [ file.size, 0 ];
    				file.rotation = 0;
    			}
    			
    			$li.on( 'mouseenter', function() {
    				$btns.stop().animate({height: 30});
    			});
    			
    			$li.on( 'mouseleave', function() {
    				$btns.stop().animate({height: 0});
    			});
    			
    			$btns.on( 'click', 'span', function() {
    				var index = $(this).index(),
    				deg;
    				
    				switch ( index ) {
    				case 0:
    					uploader.removeFile( file );
    					return;
    					
    				case 1:
    					file.rotation += 90;
    					break;
    					
    				case 2:
    					file.rotation -= 90;
    					break;
    				}
    				
    				if ( supportTransition ) {
    					deg = 'rotate(' + file.rotation + 'deg)';
    					$wrap.css({
    						'-webkit-transform': deg,
    						'-mos-transform': deg,
    						'-o-transform': deg,
    						'transform': deg
    					});
    				} else {
    					$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
    				}
    			});
    			
    			$li.appendTo( $queue );
    		}
    		
    		// 负责view的销毁
    		function removeFile( file ) {
    			var $li = $('#'+file.id);
    			var file_id = $li.find("input[name='fileId']").attr("value");
    			var file_path = $li.find("input[name='urlInfor']").attr("value");
    			var file_file = $li.find("input[name='fileFile']").attr("value");
    			delete percentages[ file.id ];
    			updateTotalProgress();
    			$li.off().find('.file-panel').off().end().remove();
    			//后台删除
    			$.ajax({
    				url:'user/file/del',
    				type:"POST",
    				data:{
    					id:file_id,
    					filePath:file_path,
    					fileFile:file_file
    				},
    				success:function(result){
    					console.log("delete:"+result);
    				}
    			});
    		}
    		
    		// 负责view的销毁
    		function removeView( file ) {
    			var $li = $('#'+file.id);
    			delete percentages[ file.id ];
    			updateTotalProgress();
    			$li.off().find('.file-panel').off().end().remove();
    		}
    		
    		function updateTotalProgress() {
    			var loaded = 0,
    			total = 0,
    			spans = $progress.children(),
    			percent;
    			
    			$.each( percentages, function( k, v ) {
    				total += v[ 0 ];
    				loaded += v[ 0 ] * v[ 1 ];
    			} );
    			
    			percent = total ? loaded / total : 0;
    			
    			
    			spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
    			spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
    			updateStatus();
    		}
    		
    		function updateStatus() {
    			var text = '', stats;
    			
    			if ( state === 'ready' ) {
    				text = '选中' + fileCount + '张图片，共' +
    				WebUploader.formatSize( fileSize ) + '。';
    			} else if ( state === 'confirm' ) {
    				stats = uploader.getStats();
    				if ( stats.uploadFailNum ) {
    					text = stats.successNum+ '张成功，'+
    					stats.uploadFailNum + '张失败'
    				}
    				
    			} else {
    				stats = uploader.getStats();
    				text = '共' + fileCount + '张（' +
    				WebUploader.formatSize( fileSize )  +
    				'），已上传' + stats.successNum + '张';
    				
    				if ( stats.uploadFailNum ) {
    					text += '，失败' + stats.uploadFailNum + '张';
    				}
    			}
    			
    			$info.html( text );
    		}
    		
    		function setState( val ) {
    			var file, stats;
    			
    			if ( val === state ) {
    				return;
    			}
    			
    			$upload.removeClass( 'state-' + state );
    			$upload.addClass( 'state-' + val );
    			state = val;
    			
    			switch ( state ) {
    			case 'pedding':
    				$placeHolder.removeClass( 'element-invisible' );
    				$queue.hide();
    				$statusBar.addClass( 'element-invisible' );
    				uploader.refresh();
    				break;
    				
    			case 'ready':
    				$placeHolder.addClass( 'element-invisible' );
    				$( '#filePicker2' ).removeClass( 'element-invisible');
    				$queue.show();
    				$statusBar.removeClass('element-invisible');
    				uploader.refresh();
    				break;
    				
    			case 'uploading':
    				$( '#filePicker2' ).addClass( 'element-invisible' );
    				$progress.show();
    				$upload.text( '暂停上传' );
    				break;
    				
    			case 'paused':
    				$progress.show();
    				$upload.text( '继续上传' );
    				break;
    				
    			case 'confirm':
    				$progress.hide();
    				$( '#filePicker2' ).removeClass( 'element-invisible' );
    				$upload.text( '开始上传' );
    				
    				stats = uploader.getStats();
    				if ( stats.successNum && !stats.uploadFailNum ) {
    					setState( 'finish' );
    					return;
    				}
    				break;
    			case 'finish':
    				stats = uploader.getStats();
    				break;
    			}
    			
    			updateStatus();
    		}
    		
    		uploader.onUploadProgress = function( file, percentage ) {
    			var $li = $('#'+file.id),
    			$percent = $li.find('.progress span');
    			
    			$percent.css( 'width', percentage * 100 + '%' );
    			percentages[ file.id ][ 1 ] = percentage;
    			updateTotalProgress();
    		};
    		
    		uploader.onFileQueued = function( file ) {
    			fileCount++;
    			fileSize += file.size;
    			
    			if ( fileCount === 1 ) {
    				$placeHolder.addClass( 'element-invisible' );
    				$statusBar.show();
    			}
    			addFile( file );
    			setState( 'ready' );
    			updateTotalProgress();
    		};
    		
    		uploader.onFileDequeued = function( file ) {
    			fileCount--;
    			fileSize -= file.size;
    			
    			if ( !fileCount ) {
    				setState( 'pedding' );
    			}
    			
    			removeFile( file );
    			updateTotalProgress();
    			
    		};
    		
    		uploader.on( 'all', function( type ) {
    			var stats;
    			switch( type ) {
    			case 'uploadFinished':
    				setState( 'confirm' );
    				break;
    				
    			case 'startUpload':
    				setState( 'uploading' );
    				break;
    				
    			case 'stopUpload':
    				setState( 'paused' );
    				break;
    				
    			}
    		});
    		
    		uploader.onError = function( code ) {
    			alert( 'Eroor: ' + code );
    		};
    		
    		uploader.on('uploadSuccess',function(file,json){
    			var $li = $('#'+file.id);
    			var input = '<input type="hidden" for-multi="fileRel" name="fileId" value="'+json.fileId+'">';
    			if(index == 0) input += '<input type="hidden" for-multi="fileRel" name="remark" value="portrait">';
    			if(index == 1) input += '<input type="hidden" for-multi="fileRel" name="remark" value="normal">';
    			input += '<input type="hidden" for-multi="fileRel" name="fileType" value="image">';
    			input += '<input type="hidden" for-multi="fileRel" name="fileFile" value="'+json.saveName+'">';
    			input += '<input type="hidden" for-multi="fileRel" name="urlInfor" value="'+json.savePath + json.saveName +'">';
    			$li.find(".input-container").append(input);
    		});
    		
    		$upload.on('click', function() {
    			if ( $(this).hasClass( 'disabled' ) ) {
    				return false;
    			}
    			
    			if ( state === 'ready' ) {
    				uploader.upload();
    			} else if ( state === 'paused' ) {
    				uploader.upload();
    			} else if ( state === 'uploading' ) {
    				uploader.stop();
    			}
    		});
    		
    		$info.on( 'click', '.retry', function() {
    			uploader.retry();
    		} );
    		
    		$info.on( 'click', '.ignore', function() {
    			alert( 'todo' );
    		} );
    		
    		$upload.addClass( 'state-' + state );
    		updateTotalProgress();
    		
    		//建立外部网页媒介，使得其他js文件能够访问内部方法
    		del_btn.on( 'click', function() {
    			var isRemoveView = del_btn.attr("removeView");
    			closeUploader(isRemoveView);
    		} );
    		function closeUploader(isRemoveView) {        
    			// 移除所有缩略图并将上传文件移出上传序列
    		    for (var i = 0; i < uploader.getFiles().length; i++) {
    		    	// 将图片从上传序列移除
    		    	if(isRemoveView){
    		    		removeView(uploader.getFiles()[i]);
    		    	}else uploader.removeFile(uploader.getFiles()[i]);
    		    	//uploader.removeFile(uploader.getFiles()[i], true);
    		    	//delete uploader.getFiles()[i];
    		    	// 将图片从缩略图容器移除
    		    	var $li = $('#' + uploader.getFiles()[i].id);
    		    	$li.off().remove();

    		    }
    		    setState('pedding');
    		    
    		    // 重置文件总个数和总大小

    		    fileCount = 0;

    	        fileSize = 0;

    		    // 重置uploader，目前只重置了文件队列
    		    uploader.reset();

    		    // 更新状态等，重新计算文件总个数和总大小
    		    updateStatus();

    		}
    	});
    });

})( jQuery );